<template>
  <div class="personal-info">
    <div class="page-header">
      <h2>个人信息管理</h2>
      <p>管理您的个人资料和账户设置</p>
    </div>

    <div class="info-container">
      <!-- 头像设置 -->
      <div class="info-section">
        <div class="section-header">
          <h3>头像设置</h3>
        </div>
        <div class="avatar-section">
          <div class="avatar-display">
            <img :src="userInfo.avatar" alt="用户头像" />
            <div class="avatar-overlay">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                <circle cx="12" cy="13" r="4"/>
              </svg>
            </div>
          </div>
          <div class="avatar-actions">
            <button class="btn btn-primary" @click="handleAvatarUpload">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7,10 12,15 17,10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              上传头像
            </button>
            <button class="btn btn-secondary" @click="handleAvatarRemove">删除头像</button>
          </div>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="info-section">
        <div class="section-header">
          <h3>基本信息</h3>
          <button class="btn btn-text" @click="toggleEdit('basic')">
            {{ isEditing.basic ? '取消' : '编辑' }}
          </button>
        </div>
        <div class="form-grid">
          <div class="form-group">
            <label>用户名</label>
            <input 
              v-model="editableInfo.username" 
              :disabled="!isEditing.basic"
              placeholder="请输入用户名"
            />
          </div>
          <div class="form-group">
            <label>真实姓名</label>
            <input 
              v-model="editableInfo.realName" 
              :disabled="!isEditing.basic"
              placeholder="请输入真实姓名"
            />
          </div>
          <div class="form-group">
            <label>邮箱地址</label>
            <input 
              v-model="editableInfo.email" 
              :disabled="!isEditing.basic"
              type="email"
              placeholder="请输入邮箱地址"
            />
          </div>
          <div class="form-group">
            <label>手机号码</label>
            <input 
              v-model="editableInfo.phone" 
              :disabled="!isEditing.basic"
              placeholder="请输入手机号码"
            />
          </div>
          <div class="form-group">
            <label>性别</label>
            <select v-model="editableInfo.gender" :disabled="!isEditing.basic">
              <option value="">请选择性别</option>
              <option value="male">男</option>
              <option value="female">女</option>
              <option value="other">其他</option>
            </select>
          </div>
          <div class="form-group">
            <label>出生日期</label>
            <input 
              v-model="editableInfo.birthday" 
              :disabled="!isEditing.basic"
              type="date"
            />
          </div>
        </div>
        <div class="form-actions" v-if="isEditing.basic">
          <button class="btn btn-primary" @click="saveBasicInfo">保存更改</button>
          <button class="btn btn-secondary" @click="cancelEdit('basic')">取消</button>
        </div>
      </div>

      <!-- 密码修改 -->
      <div class="info-section">
        <div class="section-header">
          <h3>密码修改</h3>
          <button class="btn btn-text" @click="toggleEdit('password')">
            {{ isEditing.password ? '取消' : '修改密码' }}
          </button>
        </div>
        <div class="form-grid" v-if="isEditing.password">
          <div class="form-group">
            <label>当前密码</label>
            <input 
              v-model="passwordForm.currentPassword" 
              type="password"
              placeholder="请输入当前密码"
            />
          </div>
          <div class="form-group">
            <label>新密码</label>
            <input 
              v-model="passwordForm.newPassword" 
              type="password"
              placeholder="请输入新密码"
            />
          </div>
          <div class="form-group">
            <label>确认新密码</label>
            <input 
              v-model="passwordForm.confirmPassword" 
              type="password"
              placeholder="请再次输入新密码"
            />
          </div>
        </div>
        <div class="form-actions" v-if="isEditing.password">
          <button class="btn btn-primary" @click="savePassword">修改密码</button>
          <button class="btn btn-secondary" @click="cancelEdit('password')">取消</button>
        </div>
      </div>

      <!-- 账户设置 -->
      <div class="info-section">
        <div class="section-header">
          <h3>账户设置</h3>
        </div>
        <div class="setting-items">
          <div class="setting-item">
            <div class="setting-info">
              <h4>邮箱通知</h4>
              <p>接收系统通知和检测结果提醒</p>
            </div>
            <div class="setting-control">
              <label class="switch">
                <input type="checkbox" v-model="settings.emailNotifications" />
                <span class="slider"></span>
              </label>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <h4>短信通知</h4>
              <p>接收重要安全预警和检测结果</p>
            </div>
            <div class="setting-control">
              <label class="switch">
                <input type="checkbox" v-model="settings.smsNotifications" />
                <span class="slider"></span>
              </label>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <h4>自动保存检测结果</h4>
              <p>自动保存您的检测历史记录</p>
            </div>
            <div class="setting-control">
              <label class="switch">
                <input type="checkbox" v-model="settings.autoSave" />
                <span class="slider"></span>
              </label>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <h4>数据共享</h4>
              <p>允许匿名分享数据以改善服务</p>
            </div>
            <div class="setting-control">
              <label class="switch">
                <input type="checkbox" v-model="settings.dataSharing" />
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>
        <div class="form-actions">
          <button class="btn btn-primary" @click="saveSettings">保存设置</button>
        </div>
      </div>

      <!-- 账户安全 -->
      <div class="info-section">
        <div class="section-header">
          <h3>账户安全</h3>
        </div>
        <div class="security-items">
          <div class="security-item">
            <div class="security-info">
              <h4>登录验证</h4>
              <p class="status enabled">已启用</p>
            </div>
            <button class="btn btn-secondary">管理</button>
          </div>
          <div class="security-item">
            <div class="security-info">
              <h4>设备管理</h4>
              <p>管理登录设备和会话</p>
            </div>
            <button class="btn btn-secondary">查看设备</button>
          </div>
          <div class="security-item">
            <div class="security-info">
              <h4>账户注销</h4>
              <p>永久删除账户和所有数据</p>
            </div>
            <button class="btn btn-danger" @click="handleAccountDeletion">注销账户</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 用户信息
const userInfo = ref({
  avatar: 'https://via.placeholder.com/120x120/1e3c72/ffffff?text=头像',
  username: 'user123',
  realName: '张三',
  email: 'user@example.com',
  phone: '13800138000',
  gender: 'male',
  birthday: '1990-01-01',
  registrationDate: '2024-01-01'
})

// 可编辑的信息
const editableInfo = reactive({
  username: '',
  realName: '',
  email: '',
  phone: '',
  gender: '',
  birthday: ''
})

// 编辑状态
const isEditing = reactive({
  basic: false,
  password: false
})

// 密码表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 设置选项
const settings = reactive({
  emailNotifications: true,
  smsNotifications: true,
  autoSave: true,
  dataSharing: false
})

// 初始化数据
const initializeData = () => {
  Object.assign(editableInfo, userInfo.value)
}

// 切换编辑状态
const toggleEdit = (type) => {
  if (isEditing[type]) {
    cancelEdit(type)
  } else {
    isEditing[type] = true
    if (type === 'basic') {
      Object.assign(editableInfo, userInfo.value)
    }
  }
}

// 取消编辑
const cancelEdit = (type) => {
  isEditing[type] = false
  if (type === 'basic') {
    Object.assign(editableInfo, userInfo.value)
  } else if (type === 'password') {
    Object.assign(passwordForm, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
  }
}

// 保存基本信息
const saveBasicInfo = () => {
  // 这里应该调用API保存信息
  console.log('保存基本信息:', editableInfo)
  Object.assign(userInfo.value, editableInfo)
  isEditing.basic = false
  // 显示成功消息
  alert('基本信息已保存')
}

// 保存密码
const savePassword = () => {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }
  if (passwordForm.newPassword.length < 6) {
    alert('密码长度至少为6位')
    return
  }
  // 这里应该调用API修改密码
  console.log('修改密码')
  isEditing.password = false
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  alert('密码修改成功')
}

// 保存设置
const saveSettings = () => {
  // 这里应该调用API保存设置
  console.log('保存设置:', settings)
  alert('设置已保存')
}

// 处理头像上传
const handleAvatarUpload = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = (event) => {
    const file = event.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        userInfo.value.avatar = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
  input.click()
}

// 处理头像删除
const handleAvatarRemove = () => {
  if (confirm('确定要删除头像吗？')) {
    userInfo.value.avatar = 'https://via.placeholder.com/120x120/1e3c72/ffffff?text=头像'
  }
}

// 处理账户注销
const handleAccountDeletion = () => {
  if (confirm('确定要注销账户吗？此操作不可逆转！')) {
    // 这里应该调用API注销账户
    console.log('注销账户')
    alert('账户注销功能暂未开放')
  }
}

onMounted(() => {
  initializeData()
})
</script>

<style scoped>
.personal-info {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.info-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f5f5f5;
}

.section-header h3 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-primary:hover {
  background: #2d4a87;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-secondary:hover {
  background: #e9e9e9;
}

.btn-text {
  background: transparent;
  color: #1e3c72;
  padding: 4px 8px;
}

.btn-text:hover {
  background: rgba(30, 60, 114, 0.1);
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover {
  background: #c82333;
}

/* 头像设置 */
.avatar-section {
  display: flex;
  align-items: center;
  gap: 24px;
}

.avatar-display {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #f5f5f5;
}

.avatar-display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

.avatar-display:hover .avatar-overlay {
  opacity: 1;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 表单网格 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select {
  padding: 12px;
  border: 2px solid #e9e9e9;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #1e3c72;
}

.form-group input:disabled,
.form-group select:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 设置项 */
.setting-items,
.security-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-item,
.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.setting-info h4,
.security-info h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.setting-info p,
.security-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.status.enabled {
  color: #28a745;
  font-weight: 500;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #1e3c72;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .personal-info {
    padding: 16px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .avatar-section {
    flex-direction: column;
    text-align: center;
  }
  
  .setting-item,
  .security-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .form-actions {
    justify-content: center;
  }
}
</style> 